<template>
  <el-dialog class="dialog" title="货品库" center="center" :visible.sync="dialogTableVisible">
    <div>
      <el-form :inline="true" :model="filters" ref="searchForm">
        <el-form-item>
          <el-button type="primary" plain icon="el-icon-folder" @click="handleCopyServers" size="mini">
            复制产品
          </el-button>
        </el-form-item>
        <el-form-item prop="name">
          <el-input size="mini" v-model="filters.name" placeholder="请输入服务名称"></el-input>
        </el-form-item>
        <el-form-item prop="classifyIds">
          <el-cascader v-model="filters.classifyIds" size="mini" clearable placeholder="请选择服务分类" @change="getOption"
            :options="serverClassifyList"
            :props="{ checkStrictly: true, value: 'serverClassifyId', label: 'classifyName' }">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="serverList" @selection-change="changeSelect" style="margin-top: 20px;" empty-text="对不起，没有找到相关数据！">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column align="center" label="货品编号" prop="serverCode"></el-table-column>
      <el-table-column align="center" label="货品图片" width="160">
        <template slot-scope="scope">
          <div class="img-wrapper">
            <el-image title="点击可预览" :src="scope.row.mainImage" :preview-src-list="[scope.row.mainImage]"
              :z-index="scope.$index">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="货品名称" prop="name">
      </el-table-column>
      <el-table-column align="center" label="货品分类">
        <template slot-scope="scope">
          {{ scope.row.serverClassifyName }}-{{ scope.row.thirdClassifyName }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="规格">
        <template slot-scope="scope">
          <el-tag type="danger" size="mini" effect="dark" v-if="scope.row.serverType == 2">
            套餐
          </el-tag>
          <el-tag effect="dark" size="mini" v-else-if="scope.row.variantState == 1">
            单品
          </el-tag>
          <el-tag type="success" size="mini" effect="dark" v-else-if="scope.row.variantState == 2">
            多规格
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="上门/到店/远程/紧急通知" width="120">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" v-if="scope.row.visitFlag == 1">
              上门
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.shopFlag == 1" type="success">
              到店
            </el-tag>
            <div></div>
            <el-tag size="mini" effect="dark" v-if="scope.row.remoteFlag == 1" type="warning">
              远程
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.fastFlag == 1" type="danger">
              急
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否需配送费">
        <template slot-scope="scope">
          <div>
            <el-tag size="mini" effect="dark" v-if="scope.row.deliveryFlag == 0" type="info">
              否
            </el-tag>
            <el-tag size="mini" effect="dark" v-if="scope.row.deliveryFlag == 1">
              是
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="平台原价" prop="price"></el-table-column>
      <el-table-column align="center" label="平台售价" prop="salePrice"></el-table-column>

      <el-table-column align="center" label="商户原价" prop="marketPrice"></el-table-column>
      <el-table-column align="center" label="商户折扣比例" prop="discount"></el-table-column>
      <el-table-column align="center" label="成本价" prop="costPrice"></el-table-column>
      <el-table-column align="center" label="包装费" prop="packageFee"></el-table-column>
      <el-table-column align="center" width="90" label="创建时间" prop="createDate"></el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.pageNo" :page-sizes="[20, 50, 100]" :page-size="page.pageSize"
      layout="total, sizes, jumper, next, pager, prev" :total="page.pageTotal"></el-pagination>
  </el-dialog>
</template>
<script>
import BusinessServerApi from "@/api/goods/businessServer"
import ServerClassifyApi from "@/api/server/serverClassify";

export default {
  props: {
    businessId: {
      type: Number | String,
    },
    active:{
      type:Number|String
    }
  },
  data() {
    return {
      // copy:3,
      businessVillageId: "",
      selectIds: [],
      serverList: [], // 商户货品库集合
      dialogTableVisible: false,
      // allServerList:[],// 全部商户货品库集合
      filters: {
        name: "",
        classifyIds: [],
      },
      serverClassifyList: [],
      page: {
        pageNo: 1,
        pageTotal: 0,
        pageSize: 20
      },
    }
  },
  components: {},
  created() {
  },
  methods: {
    init() {
      if (this.businessId) {
        this.getBusinessServerList()
        this.getServerClassifyList()
      }
    },
    changeSelect(val) {
      this.selectIds = [];
      for (let i = 0; i < val.length; i++) {
        this.selectIds.push(val[i].serverId);
      }
    },
    // 分类选中
    getOption(e) {
      this.filters.classifyIds = e
    },
    getBusinessServerList() {
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        businessId: this.businessId,
        businessVillageId: this.businessVillageId,
        name: this.filters.name,
        serverClassifyId: this.filters.classifyIds[0] ? this.filters.classifyIds[0] : "",
        thirdClassifyId: this.filters.classifyIds[1] ? this.filters.classifyIds[1] : ""
      }
      if(this.active){
        params.active = this.active
      }
      BusinessServerApi.listByParam(params).then(res => {
        this.serverList = res.data.list
        this.page.pageTotal = res.data.total
        // this.allServerList = res.data
        // this.copy = 3
      })
    },
    // 获取产品分类列表
    getServerClassifyList() {
      ServerClassifyApi.listServerClassify({ level: 2 }).then(res => {
        this.serverClassifyList = res.data
      })
    },
    handleCopyServers() {
      let _this = this
      if (!_this.selectIds || _this.selectIds.length == 0) {
        _this.$message.error("请先勾选需要复制的产品")
      }
      let oneServer = [];
      _this.serverList.forEach(a => {
        _this.selectIds.find(function (value) {
          if (value === a.serverId) {
            oneServer.push(a);
          }
        })
      })
      this.$emit("getServerList", oneServer)
      this.dialogTableVisible = false;
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.onSearch()
    },
    onSearch() {
      this.page.pageNo = 1
      this.getBusinessServerList();
    },
    handleCreate(businessVillageId) {
      if (businessVillageId) {
        this.businessVillageId = businessVillageId
      }
      this.dialogTableVisible = true; // 显示弹出框
      this.init()
    },
    handleSizeChange(size) {
      this.page.pageSize = size
      this.getBusinessServerList()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.getBusinessServerList()
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  &::v-deep .el-dialog {
    width: max-content;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .el-radio-group {
    margin-left: 10px;

    .el-radio {
      margin-right: 20px;
    }
  }

  .img-wrapper {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 3px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;

    .el-image {
      width: 100%;

      &::v-deep img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>

